/**
 * 订单管理 交易订单
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>交易订单</el-breadcrumb-item>
    </el-breadcrumb>
    <el-radio-group v-model="queryTab" @change="tabChange" style="margin-top: 20px;" size="mini">
      <el-radio-button label="1">收件箱</el-radio-button>
      <el-radio-button label="2">发件箱</el-radio-button>
    </el-radio-group>
    <el-row style="text-align: center" v-if="queryTab === '1'">
    <!--列表-->
    <el-table :data="listData"
              height="500"
              style="width: 100%;margin-top: 20px">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="消息内容:">
              <span>{{ props.row.messageContent }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column align="center" label="序号" type="index" width="60">
      </el-table-column>
      <el-table-column
        label="消息编码"
        prop="messageCode">
      </el-table-column>
      <el-table-column
        label="发件人"
        prop="sendUser.userName">
      </el-table-column>
      <el-table-column
        label="发送时间"
        prop="sendTime"
        sortable
        show-overflow-tooltip>
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span>{{scope.row.sendTime|timestampToTime}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="messageStatus"
        label="状态"
        :filters="[{ text: '未读', value: 1 }, { text: '已读', value: 2 }]"
        :filter-method="filterStatus"
        :filter-multiple="false"
        filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.messageStatus === 1 ? 'info' : 'success'"
            disable-transitions>
            {{scope.row.messageStatus == 1 ? '未读' : '已读'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="150">
        <template slot="header" slot-scope="scope">
          <el-button
            size="small"
          type="warning"
          @click="haveReadAllMessage">
            全部标为已读
          </el-button>
        </template>
        <template slot-scope="scope">
          <el-button size="mini" type="info" @click="haveReadMessage(scope.$index, scope.row)">标为已读</el-button>
          <el-button size="mini" type="danger" @click="deleteMessage(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="text" :loading="moreLoad" @click="moreLoadBtn">
      <span v-if="moreLoad">加载中</span>
      <span v-else>加载更多</span>
    </el-button>
    </el-row>

    <el-row style="text-align: center" v-if="queryTab === '2'">
      <el-table :data="listData"
                height="500"
                style="width: 100%;margin-top: 20px">
        <el-table-column
          width="150px"
          type="expand">
          <template slot="header" slot-scope="scope">
            <el-button
              size="small"
              type="warning"
              @click="sendMessage">
              发送留言信息
            </el-button>
          </template>
          <template slot-scope="props" style="margin-left: 200px">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="消息内容:">
                <span>{{ props.row.messageContent }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column align="center" label="序号" type="index" width="60">
        </el-table-column>
        <el-table-column
          label="消息编码"
          prop="messageCode">
        </el-table-column>
        <el-table-column
          label="收件人"
          prop="acceptUser.userName">
        </el-table-column>
        <el-table-column
          label="发送时间"
          prop="sendTime"
          sortable
          show-overflow-tooltip>
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span>{{scope.row.sendTime|timestampToTime}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="messageStatus"
          label="状态"
          :filters="[{ text: '未读', value: 1 }, { text: '已读', value: 2 }]"
          :filter-method="filterStatus"
          :filter-multiple="false"
          filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.messageStatus === 1 ? 'info' : 'success'"
              disable-transitions>
              {{scope.row.messageStatus == 1 ? '未读' : '已读'}}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="text" :loading="moreLoad" @click="moreLoadBtn">
        <span v-if="moreLoad">加载中</span>
        <span v-else>加载更多</span>
      </el-button>
    </el-row>
    <!-- 分页组件 -->

    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="50%" @click="closeDialog('editForm')">
      <el-form :model="editForm" ref="editForm">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="收件人">
              <el-select v-model="editForm.acceptUserId" filterable placeholder="请选择"@change="acceptUserIdChange">
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.userName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="消息编码">
              <el-input style="width: 217px"
                        v-model="editForm.messageCode"
                        placeholder="请输入消息编码"
                        disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="消息内容">
          <el-input size="small"
                    type="textarea"
                    :rows="3"
                    v-model="editForm.messageContent"
                    auto-complete="off"
                    placeholder="请输入消息内容"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="clean">取 消</el-button>
        <el-button type="primary" @click="send">发 送</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '../../components/Pagination'
import {Post, Get} from "../../api/axiosFun";
import {getCookie, getStore} from "../../utils/util";
import axios from "axios";
export default {
  data() {
    return {
      idNew: false,

      userList: [],

      user: {},
      messageTab: '',
      queryTab: '1',
      moreLoad:false,

      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: '发送消息',
      editForm: {},
      oldEditForm: {},
      formInline: {
        pageIndex: 0,
        sendUserId: '',
        acceptUserId: '',
        enableStatus: '',
        messageStatus: '',
        messageCodeOrContent: '',
      },
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  /**
   * 创建完毕
   */
  created() {
    this.listData = [];
    this.moreLoad = true;
    this.user = getStore('userData');
    this.tabChange();
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 切换tab
    tabChange(){
      this.listData = []
      this.formInline.pageIndex = 0;
      // 收件箱
      if(this.queryTab == '1'){
        this.formInline.acceptUserId = this.user.id;
        this.formInline.sendUserId = '';
        this.formInline.enableStatus = 2;
      }
      // 发件箱
      else {
        this.formInline.acceptUserId = '';
        this.formInline.sendUserId = this.user.id;
      }
      this.getdata();
    },
    // 获取公司列表
    getdata() {
      Post("/officeSystem/message/selectByQueryCondition", this.formInline)
      .then(result => {
        if(result.status == 200 && result.data.resultList.length != 0){
          for(let i=0; i<result.data.resultList.length; i++){
            this.listData.push(result.data.resultList[i]);
          }
          this.moreLoad = false;
        }else{
          this.moreLoad = false;
          this.$message.info("暂无更多数据")
        }
      })
    },
    // 表格状态过滤器
    filterStatus(value, row) {
      console.log(value);
      console.log(row);
      return row.messageStatus === value;
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.pageIndex = parm.currentPage - 1
      this.formInline.pageSize = parm.pageSize
      this.getdata(this.formInline)
    },
    moreLoadBtn(){
      this.moreLoad = true;
      this.formInline.pageIndex = this.formInline.pageIndex + 1;
      this.getdata();
    },
    haveReadAllMessage(){
      Post( "/officeSystem/message/haveAllRead", {
        userId: this.user.id
      }).then(result => {
        if(result.status == 200){
          this.$message.success(result.message)
          for(let i=0; i<this.listData.length; i++){
            this.listData[i].messageStatus = 2;
          }
        }
      })
    },
    haveReadMessage(index, row){
      let list = []
      let param = {
        'id': row.id,
        'messageStatus': row.messageStatus
      }
      list.push(param);
      let params = {
        params: JSON.stringify(list)
      }
      Post( "/officeSystem/message/haveRead", params)
        .then(result => {
          if (result.status == 200) {
            this.$message.success(result.message)
            this.listData[index].messageStatus = 2;
          }
        })
    },
    deleteMessage(index, row){
      let list = []
      let param = {
        'id': row.id,
      }
      list.push(param);
      let params = {
        params: JSON.stringify(list)
      }
      Post("/officeSystem/message/delMessage", params)
        .then(result => {
          if (result.status == 200) {
            this.$message.success(result.message)
            this.listData.splice(index, 1);
          }
        })
    },
    acceptUserIdChange(){
      this.editForm.messageCode = new Date().getTime() + "_" + this.editForm.acceptUserId
    },
    sendMessage(){
      Get( "/officeSystem/user/getAllUser", {
        id: this.user.id
      }).then(result => {
        this.userList = result.data
      })

      Get("/officeSystem/message/draft", {
        userId: this.user.id
      }).then(result => {
        if(result.status == 200){
          this.editForm = result.data;
          this.editForm = {
            id: result.data.id,
            sendUserId: result.data.sendUserId,
            acceptUserId: result.data.acceptUserId,
            messageCode: result.data.messageCode,
            messageContent: result.data.messageContent,
            enableStatus: result.data.enableStatus,
            messageStatus: result.data.messageStatus,
            creator: result.data.creator,
            dr: result.data.dr
          }
          this.oldEditForm = this.editForm;
          this.idNew = false;
        }else{
          this.idNew = true;
          this.editForm = {
            id: null,
            sendUserId: null,
            acceptUserId: null,
            messageCode: null,
            messageContent: null,
            enableStatus: null,
            messageStatus: null,
            creator: null,
            dr: null
          }
        }
      })
      this.editFormVisible = true;
    },
    clean(){
      if(this.oldEditForm == this.editForm){
        this.editFormVisible = false;
        return;
      }
      this.editForm.sendUserId = this.user.id;
      this.$confirm('信息未发送, 是否保存为草稿?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Post( "/officeSystem/message/insert",this.editForm)
        .then(result => {
          if(result.status == 200){
            this.$message.success(result.message);
            this.tabChange();
            this.editFormVisible = false;
          }else{
            this.$message.error(result.message);
            this.editFormVisible = false;
          }
        })
      }).catch(() => {
        this.$message.info("已取消保存");
        this.editFormVisible = false;
      });
    },
    send(){
      this.editForm.sendUserId = this.user.id
      Post("/officeSystem/message/insertSelective", this.editForm)
        .then(result => {
          if(result.status == 200){
            this.$message.success(result.message);
            this.tabChange();
            this.editFormVisible = false;
          }else{
            this.$message.error(result.message);
            this.editFormVisible = false;
          }

        })
    }
  }
}
</script>

<style>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
.demo-table-expand {
  font-size: 0;
  text-align: center;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>




